<template>
	<div>
		<!--这里是文章列表页面-->
		<el-table :data="postList" style="width: 100%" stripe :default-sort = "{prop: 'date', order: 'descending'}">
			
			<!--这是ID-->
			<el-table-column label="ID" width="55" header-align="center" align="center">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<!--这里是时间-->
			<el-table-column label="时间" width="140" header-align="center" align="center" sortable  prop="date">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.create_date.split("T")[0] }}</span>
				</template>
			</el-table-column>
			<!--这里是缩略图-->
			<el-table-column label="缩略图" width="200" header-align="center" align="center">
				<template slot-scope="scope">
					<img v-if="scope.row.cover[0]" class="thumbnail" :src="scope.row.cover[0].url" alt="" />
				</template>
			</el-table-column>
			<!--这里是标题-->
			<el-table-column label="标题" width="360" header-align="center" align="center">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.title }}</span>
				</template>
			</el-table-column>
			<!--这里是用户的nickname-->
			<el-table-column label="用户昵称" width="160" header-align="center" align="center">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.user.nickname }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" header-align="center" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="$router.push({path:'/admin/editpage?id='+scope.row.id})" >编辑</el-button>
					<el-button size="mini" type="danger" @click="Forbidden($event,scope.row.id)">下架</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				 background :current-page="pageIndex" 
				 :page-sizes="[5, 8, 16, 20]" :page-size="pageSize" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="totalpages">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				postList: [],
				pageIndex:1,
				pageSize:5,
                totalpages:10,
                postId:0
			}
		},
		mounted() {
			this.loadPostList();
		},
		methods: {
			loadPostList() {
				this.$axios({
					url: "/post",
					method: "GET",
					params:{
						pageIndex:this.pageIndex,//当前页是1   total总数据条数/pageSize=总页数
					    pageSize:this.pageSize   //每页5条数据
					}
					     
				}).then(res => {
					console.log("这里是文章列表数据", res.data);
//					
					const {data,total} = res.data;
//					遍历data,给没有加上基准路径的cover图片加上基准路径
                 
                     data.forEach((item)=>{
                     	console.log("cover",item.cover);
                          if(item.cover.length> 0 && item.cover[0].url.indexOf("http")<0){
                     		item.cover[0].url=this.$axios.defaults.baseURL+item.cover[0].url;
                     	   }
                     })
					this.totalpages=total;
//					console.log("总数据条数",this.totalpages);
					this.postList = data;
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize=val;
				//更改完每页显示的条数，进行调用获取文章数据
				this.loadPostList();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
//				将当前页赋值给pageIndex
               this.pageIndex=val;
               //更改完当前页索引，进行调用获取文章数据
               this.loadPostList();
			},
			 Forbidden(event,postId){
			 	this.postId=postId;
//			 	调用下架函数
                  if(event.target.innerHTML=="下架"){
                  	this.underCarries(this.postId,0);
                  	event.target.innerHTML="已下架";
                  }
			 },
//			下架文章
          underCarries(postId,open){
          	this.$axios({
          		url:"/post_update/" + postId,
          		method:"post",
          		data:{
          			open:open
          		}
          	}).then(res=>{
          		console.log("更新的值",res);
          		const {message}=res.data;
          		if(message=="文章编辑成功"&&open==0){
          			this.$message({
          				message:'下架成功',
          				type:"success"
          			}) 
          			
          		}
          	})
          }
		}

	}
</script>

<style lang="less" scoped>
	.thumbnail {
		width: 200px;
		height: 120px;
		object-fit: cover;
	}
	.block{
		text-align: center;
		padding-top:20px;
	}
</style>